<template>
    <!-- <div>{{ ify }}</div> -->
    <div class="content">
        <div class="item" v-for="i in arr.result" @click="on(i.index_product_id)">
            <div class="img">
                <img :src="i.product_img" alt="" />
            </div>
            <div class="name">{{ i.product_name }}</div>
        </div>
        <div class="item">
            <div class="img"></div>
            <div class="name"></div>
        </div>
        <div class="item">
            <div class="img"></div>
            <div class="name"></div>
        </div>
    </div>
</template>

<script setup>
import { computed, ref, watch, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { getClassify } from "../request/index.js";
let store = useStore();
let router = useRouter();
let ify = ref("");
let arr = reactive({ result: [] });
ify = computed(() => {
    return store.state.myindex.index;
});
onMounted(() => {
    let id = store.state.myindex.index;
    getClassify({ type_id: id }).then((data) => {
        arr.result = data.data;
        // console.log(arr.result);
    });
});
watch(ify, (a, b) => {
    getClassify({ type_id: a }).then((data) => {
        arr.result = data.data;
        // console.log(arr.result);
    });
});
let on = (x) => {
    router.push({ path: "/commoditydetails/" + x, query: { id: x } });
};
</script>

<style lang="scss" scoped>
.content {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item {
        margin-top: 12px;
        width: 5rem;
    }
    .img {
        width: 5rem;
        height: 5.625rem;
        // background-color: #cfcfcf;
        img {
            border-radius: 0.5rem;
            width: 100%;
            height: 100%;
        }
    }
    .name {
        padding-top: 0.375rem;
        width: 100%;
        font-size: 0.75rem;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
</style>
